<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="甘忠祥">
    <title>下拉列表</title>
    <style>
            *{
        box-sizing: border-box;
    }
    body{
        margin: 0;
        background-color: darkgray;
    }
    ul,li{
        padding: 0;
        margin: 0;
        list-style: none;
    }
    a{
        text-decoration: none;
         color: white; 
    }
    header{
        width: 100%;
        height: 60px;
        background-color: black;
    }
    .container{
        width: 1500px;
        margin: 0 auto;
    }
    .list{
        display: flex;
        
    }
    .list a{
        line-height: 60px;
        padding: 0 10px;
    }
    .list a:hover{
        color: darkgoldenrod;
    }
    .list span{
        display: inline-block;
        width: 10px;
        height: 8px;
        background-image: url('img/icon.png');
        background-position: -60px 0;
        margin-left: 5px;
    }
     .list li:last-child:hover span{
        display: inline-block;
        width: 16px;
        height: 8px;
        background-image: url('img/icon.png');
        background-position: -111px 0;
        margin-left: 3px;
    } 
    .active{
        position: absolute;
        width: 280px;
        display: none; 
    }
    .more{
        display: none; 
    }
    .active li{
        width: 140px;
        float: left;
        /* background-color: gray; */
    }
    .active li a{
        display: inline-block;
        height: 50px;
        width: 140px; 
        background-color: gray;
        margin: 1px 2px;
        border: 1px solid gray;
        border-radius: 8px;
    }
    </style>
</head>

<body>
<header>
    <nav class="container">
        <ul class="list">
            <li><a href="#" style="color:aqua">首页</a></li>
            <li onmouseover="display(this)" onmouseout="hide(this)"><a href="#">剧集</a>
                 <ul class="active">
                    <li><a href="#">楚乔传</a></li>
                    <li><a href="#">春风十里不如你</a></li>
                    <li><a href="#">请回答1988</a></li>
                    <li><a href="#">西游记</a></li>
                    <li><a href="#">醉玲珑</a></li>
                    <li><a href="#">我的前半生</a></li>
                    <li><a href="#">亮剑</a></li>
                    <li><a href="#">回家的诱惑</a></li>
                </ul> 
            </li>
            <li onmouseover="display(this)" onmouseout="hide(this)"><a href="#">电影</a>
                <ul class="active">
                    <li><a href="#">战狼</a></li>
                    <li><a href="#">战狼2</a></li>
                    <li><a href="#">肖生克的救赎</a></li>
                    <li><a href="#">三生三世</a></li>
                    <li><a href="#">小黄人大眼萌</a></li>
                    <li><a href="#">美人鱼</a></li>
                    <li><a href="#">捉妖记</a></li>
                    <li><a href="#">夏洛特烦恼</a></li>
                </ul>
            </li>
            <li onmouseover="display(this)" onmouseout="hide(this)"><a href="#">综艺</a>
                 <ul class="active">
                    <li><a href="#">极限挑战</a></li>
                    <li><a href="#">火星情报局</a></li>
                    <li><a href="#">非诚勿扰</a></li>
                    <li><a href="#">中国有嘻哈</a></li>
                </ul>
            </li>
            <li onmouseover="display(this)" onmouseout="hide(this)"><a href="#">音乐</a>
                <ul class="active">
                    <li><a href="#">陈粒：粒粒万乡</a></li>
                    <li><a href="#">jam：不漏声色</a></li>
                    <li><a href="#">薛之谦：刚刚好</a></li>
                    <li><a href="#">周杰伦：借口</a></li>
                </ul>
            </li>
            <li onmouseover="display(this)" onmouseout="hide(this)"><a href="#">少儿</a>
                <ul class="active">
                    <li><a href="#">喜洋洋</a></li>
                    <li><a href="#">熊出没</a></li>
                    <li><a href="#">赛尔号</a></li>
                </ul>
            </li>
            <li onmouseover="display(this)" onmouseout="hide(this)"><a href="#">来疯</a>
                <ul class="active">
                    <li><a href="#">极限挑战</a></li>
                    
                </ul>
            </li>
            <li onmouseover="display(this)" onmouseout="hide(this)"><a href="#">直播</a>
                <ul class="active">
                    <li><a href="#">pdd</a></li>
                    <li><a href="#">五五开</a></li>
                    <li><a href="#">文森特</a></li>
                    <li><a href="#">陈一发儿</a></li>
                </ul>
            </li>
            <li onmouseover="display(this)" onmouseout="hide(this)"><a href="#">片库</a>
                <ul class="active">
                    <li><a href="#">高清电影</a></li>
                    <li><a href="#">热门电视剧</a></li>
                    <li><a href="#">综艺</a></li>
                    <li><a href="#">热门综艺</a></li>
                </ul>
            </li>
            <li onmouseover="display(this)" onmouseout="hide(this)"><a href="#">资讯</a>
                <ul class="active">
                    <li><a href="#">极限挑战</a></li>
                    <li><a href="#">火星情报局</a></li>
                    <li><a href="#">非诚勿扰</a></li>
                    <li><a href="#">中国有嘻哈</a></li>
                </ul>
            </li>
            <li onmouseover="display(this)" onmouseout="hide(this)"><a href="#">纪实</a>
                <ul class="active">
                    <li><a href="#">极限挑战</a></li>
                    <li><a href="#">火星情报局</a></li>
                    <li><a href="#">非诚勿扰</a></li>
                    <li><a href="#">中国有嘻哈</a></li>
                </ul>
            </li>
            <li onmouseover="display(this)" onmouseout="hide(this)"><a href="#">公益</a>
                <ul class="active">
                    <li><a href="#">极限挑战</a></li>
                    <li><a href="#">火星情报局</a></li>
                    <li><a href="#">非诚勿扰</a></li>
                    <li><a href="#">中国有嘻哈</a></li>
                </ul>
            </li>
            <li onmouseover="display(this)" onmouseout="hide(this)"><a href="#">体育</a>
                <ul class="active">
                    <li><a href="#">极限挑战</a></li>
                    <li><a href="#">火星情报局</a></li>
                    <li><a href="#">非诚勿扰</a></li>
                    <li><a href="#">中国有嘻哈</a></li>
                </ul>
            </li>
            <li onmouseover="display(this)" onmouseout="hide(this)"><a href="#">汽车</a>
                <ul class="active">
                    <li><a href="#">极限挑战</a></li>
                    <li><a href="#">火星情报局</a></li>
                    <li><a href="#">非诚勿扰</a></li>
                    <li><a href="#">中国有嘻哈</a></li>
                </ul>
            </li>
            <li onmouseover="display(this)" onmouseout="hide(this)"><a href="#">科技</a>
                <ul class="active">
                    <li><a href="#">极限挑战</a></li>
                    <li><a href="#">火星情报局</a></li>
                    <li><a href="#">非诚勿扰</a></li>
                    <li><a href="#">中国有嘻哈</a></li>
                </ul>
            </li>
            <li onmouseover="display(this)" onmouseout="hide(this)"><a href="#">财经</a>
                <ul class="active">
                    <li><a href="#">极限挑战</a></li>
                    <li><a href="#">火星情报局</a></li>
                    <li><a href="#">非诚勿扰</a></li>
                    <li><a href="#">中国有嘻哈</a></li>
                </ul>
            </li>
            <li onmouseover="display(this)" onmouseout="hide(this)"><a href="#">娱乐</a>
                <ul class="active">
                    <li><a href="#">极限挑战</a></li>
                    <li><a href="#">火星情报局</a></li>
                    <li><a href="#">非诚勿扰</a></li>
                    <li><a href="#">中国有嘻哈</a></li>
                </ul>
            </li>
            <li onmouseover="display(this)" onmouseout="hide(this)"><a href="#">文化</a>
                <ul class="active">
                    <li><a href="#">极限挑战</a></li>
                    <li><a href="#">火星情报局</a></li>
                    <li><a href="#">非诚勿扰</a></li>
                    <li><a href="#">中国有嘻哈</a></li>
                </ul>
            </li>
            <li onmouseover="display(this)" onmouseout="hide(this)"><a href="#">动漫</a>
                <ul class="active">
                    <li><a href="#">火影忍者</a></li>
                    <li><a href="#">海贼王</a></li>
                    <li><a href="#">进击的巨人</a></li>
                    <li><a href="#">狐妖小红娘</a></li>
                </ul>
            </li>
            <li onmouseover="display(this)" onmouseout="hide(this)"><a href="#">搞笑</a>
                <ul class="active">
                    <li><a href="#">火影忍者</a></li>
                    <li><a href="#">海贼王</a></li>
                    <li><a href="#">进击的巨人</a></li>
                    <li><a href="#">狐妖小红娘</a></li>
                </ul>
                
            </li>
            <li onmouseover="display(this)" onmouseout="hide(this)"><a href="#">旅游</a>
                <ul class="active">
                    <li><a href="#">火影忍者</a></li>
                    <li><a href="#">海贼王</a></li>
                    <li><a href="#">进击的巨人</a></li>
                    <li><a href="#">狐妖小红娘</a></li>
                </ul>
            </li>
            <li onmouseover="display(this)" onmouseout="hide(this)"><a href="#">时尚</a>
                <ul class="active">
                    <li><a href="#">火影忍者</a></li>
                    <li><a href="#">海贼王</a></li>
                    <li><a href="#">进击的巨人</a></li>
                    <li><a href="#">狐妖小红娘</a></li>
                </ul>
            </li>
            <li onmouseover="display(this)" onmouseout="hide(this)"><a href="#">亲子</a>
            <ul class="active">
                    <li><a href="#">火影忍者</a></li>
                    <li><a href="#">海贼王</a></li>
                    <li><a href="#">进击的巨人</a></li>
                    <li><a href="#">狐妖小红娘</a></li>
                </ul></li>
            <li onmouseover="display(this)" onmouseout="hide(this)"><a href="#">教育</a>
            <ul class="active">
                    <li><a href="#">火影忍者</a></li>

                </ul></li>
            <li onmouseover="display(this)" onmouseout="hide(this)"><a href="#">游戏</a>
            <ul class="active">
                    <li><a href="#">火影忍者</a></li>
                    <li><a href="#">海贼王</a></li>
                </ul>
            </li>
            <li onmouseover="display(this)" onmouseout="hide(this)"><a href="#">更多<span></span></a>
                <ul class="more">
                    <li><a href="#">VR</a></li>
                    <li><a href="#">生活</a></li>
                    <li><a href="#">原创</a></li>
                    <li><a href="#">排行</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</header>
</body>
<script>
    // var lis = document.querySelectorAll('.list>li')
    // var show = document.querySelector('.active');
    // var index = 0;
    // for (var i = 0; i < lis.length; i++){
    //     lis[i].onmouseover = function(){
    //         show.style.display = "block";
    //     }
    //     lis[i].onmouseout = function(){
    //         show.style.display = "none";
    //     }
    // } 
    function display(li) {
        var show = li.getElementsByTagName("ul")[0];
        show.style.display = "block"; 
    }
    function hide(li) {
        var subNav = li.getElementsByTagName("ul")[0];
        subNav.style.display = "none";
    }
</script>
</html>